﻿@using NFine.Code;
@model IEnumerable<NFine.Web.Areas.SSO.Models.SusSystemModel>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js?2017032301"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {

            //$.get("/SSO/SubSystem/GetList", function (data, status) {
            //    //alert("数据：" + data + "\n状态：" + status);
            //    $.each(data, function (index, item) {
            //        console.log(index);
            //        console.log(item);
            //        //$("#server_host").append("<b>" + item + "</b>");
            //    });
            //    $("#server_host").append("<b>Hello world!</b>");
            //    $("#server_host").append("<b>Hello world!</b>");
            //    $("#server_host").append("<b>Hello world!</b>");
            //});
        });



    </script>

</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>系统列表
                    <div style="float: right; position: relative; top: -4px; right: 0px;">
                    </div>
                </div>
                <div class="panel-body">
                    @foreach (var item in Model)
                    {
                        <a href="@(item.Sa_ServerHost)" target="_blank">
                            <div class="dashboard-stats">
                                <div class="dashboard-stats-item" style="background-color: #@Common.RandomColor();">
                                    <h2 class="m-top-none"></h2>
                                    <h5>@(item.Sa_App_Name)</h5>
                                    <div class="stat-icon">
                                        <i class="fa fa-user fa-3x"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    }

                </div>
            </div>
        </div>

    </div>
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 105px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 1.1;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 30px;
                opacity: .3;
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px 10px;
            }

            .panel-default > .panel-body {
                padding: 10px;
                padding-bottom: 0px;
            }

                .panel-default > .panel-body ul {
                    overflow: hidden;
                    padding: 0;
                    margin:0px;margin-top: -5px;
                }

                    .panel-default > .panel-body ul li {
                        line-height: 27px;
                        list-style-type: none;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                        .panel-default > .panel-body ul li .time {
                            color: #a1a1a1;
                            float: right;
                            padding-right: 5px;
                        }
    </style>
</body>
</html>
